css google mapの現在地マーカ的なのをcssで作ってみる - onigiri-it-tips

css google mapの現在地マーカ的なのをcssで作ってみる

注意.iconアニメーションは無し

鉄則

親：relative、子供：absolute

ポイント

1.icon丸い画像作る

2.icon空コンテンツを画像の下に重ねて、真ん中で合わさるように位置調整

3.icon空コンテンツを半透明の青色 ^ 角を丸くしまくって円にする

実際のコードは以下

以下のような形でタグを作る

code: sample.html

<div class="parent">

<image　class="image" src="..." alt="円" />

<div class="child"></div>

<div>

cssを以下のように適用する

code: sample.css

.parent {

position: relative;

}

.image {

width: 24px; height: 24px;

}

.child {

position: absolute;

zIndex: -1;

top: -6px;

left: -6px;

background: blue;

opacity: 0.3;

border-radius: 100px;

}

以上